<template>
	<view class="list flex flex-col page-full">
		<!-- tabs -->
		<template v-if="pageQuery.type==='borrow'">
			<view class="tabs flex">
				<view
					class="tabs-item flex-1 flex-row-center"
					v-for="(item,index) in tabs"
					:class="tabsActive===index?'active':''"
					@click="tabsActive = index"
				>
					{{item.label}}
				</view>
			</view>
		</template>
		<!-- 筛选 -->
		<template v-else>
			<view class="list-filter flex">
				<view
					class="flex-1 flex-row-center"
					@click="pickerVisible= true"
				>
					<text>全部</text>
					<image
						class="arrow"
						:class="pickerVisible ? 'rotate-180':''"
						src="/static/arrow01.png"
					></image>
				</view>
				<view
					class="flex-1 flex-row-center"
					@click="onFilter"
				>
					<text>筛选</text>
					<image
						class="arrow"
						:class="typeVisible ? 'rotate-180':''"
						src="/static/arrow01.png"
					></image>
				</view>
			</view>

		</template>
		<view
			class="flex-1 overflow-hidden"
			style="padding-top: 24rpx;box-sizing: border-box;"
		>
			<scroll-view
				scroll-y
				class="h-full"
				@scrolltolower="onScrolltolower"
			>
				<template v-if="list.length">
					<navigator
						hover-class="none"
						class="list-main"
						v-for="item in list"
						:url="'/pages/list/detail/detail?recordId='+item.recordId+'&cover='+item.cover"
					>
						<item-book
							:cover="item.cover"
							:name="item.title"
							:author="item.author"
							:isbn="item.isbn"
							:coverEmpty="item.coverEmpty"
						>
							<!-- <template #right>
							<template v-if="pageQuery.type==='collect'">
								<view class="collect">
									取消收藏
								</view>
							</template>
							<template v-if="pageQuery.type==='borrow'">
								<view class="borrow borrow-gray">
									借阅中
									已归还
								</view>
							</template>
						</template> -->
						</item-book>
					</navigator>
				</template>
				<template v-else>
					<view>暂无数据！</view>
				</template>
			</scroll-view>
		</view>
		<YmPicker
			:visible.sync="pickerVisible"
			:options="pickerOptions"
			@change="pickerChg"
		/>
		<FilterType :visible.sync="typeVisible" />
		<FilterFloor :visible.sync="floorVisible" />
	</view>
</template>

<script>
	import ItemBook from '@/components/item-book/index.vue';
	import YmPicker from '@/components/ym-picker/ym-picker.vue';
	import FilterType from '@/components/filter-type/filter-type.vue';
	import FilterFloor from '@/components/filter-floor/filter-floor.vue';
	import {
		find
	} from '../../api/modules/find';
	import {
		getCovers
	} from '../../utils/cover/cover';
	import BookCover from '@/components/book-cover/book-cover.vue';
	export default {
		components: {
			ItemBook,
			YmPicker,
			FilterType,
			FilterFloor,
			BookCover,
		},
		data() {
			return {
				page: 1,
				pageQuery: {},
				tabsActive: 0,
				tabs: [{
						label: "全部"
					},
					{
						label: "借阅中"
					},
					{
						label: "已归还"
					},
				],
				typeMap: {
					cate: {
						title: "分类浏览",
						visible: "typeVisible"
					},
					nav: {
						title: "馆藏地导航",
						visible: "floorVisible"
					},
					borrow: {
						title: "我的借阅"
					},
					collect: {
						title: "收藏书单",
						visible: "typeVisible"
					},
				},
				pickerVisible: false,
				pickerOptions: [{
						name: "语言学"
					},
					{
						name: "汉语"
					},
					{
						name: "中国少数民族语言"
					},
				],
				typeVisible: false,
				floorVisible: false,
				list: [],
			}
		},
		methods: {
			listGet() {
				find.unify.search({
					"docCode": [],
					"searchFieldContent": "*",
					"searchField": "callNo",
					"resourceType": [],
					"subject": [],
					"discode1": [],
					"publisher": [],
					"locationId": [],
					"collectionName": [],
					"author": [],
					"langCode": [],
					"countryCode": [],
					"coreInclude": [],
					"ddType": [],
					"verifyStatus": [],
					"group": [],
					"sortField": "relevance",
					"sortClause": "desc",
					"page": this.page,
					"rows": 10,
					"onlyOnShelf": null,
					"categorySearchFlag": 1,
					"campusId": []
				}).then(({
					searchResult
				}) => {
					console.log('find.unify.search', searchResult);
					getCovers(searchResult).then((list) => {
						console.log('list', list);
						const oldList = this.list
						const newList = list
						if (this.page !== 1 && !newList.length) {
							this.page = this.page - 1
							uni.showToast({
								title: '暂无更多数据！',
								icon: "error"
							})
						} else {
							this.list = [...oldList, ...newList]
						}
					})
				})
			},
			onScrolltolower() {
				console.log('onScrolltolower');
				this.page = this.page + 1
				this.listGet()
			},
			pickerChg(data) {
				console.log('pickerChg', data);
			},
			onFilter() {
				const typeItem = this.typeMap[this.pageQuery.type]
				this[typeItem.visible] = true
				// this.typeVisible = true	
				// this.floorVisible = true
			}
		},
		onLoad(options) {
			this.pageQuery = options
			uni.setNavigationBarTitle({
				title: options.title
			})
			this.listGet()
		}
	}
</script>

<style lang="scss">
	.list {
		.tabs {
			background-color: #fff;
			height: 88rpx;

			&-item {
				color: #2D2D2D;
			}

			.active {
				position: relative;
			}

			.active::after {
				content: '';
				display: block;

				position: absolute;
				left: calc(50% - 40rpx);
				bottom: 16rpx;

				width: 80rpx;
				height: 8rpx;

				background: #1F245B;
				border-radius: 14rpx;

			}

		}


		&-filter {
			height: 88rpx;
			background: #FFFFFF;

			.arrow {
				width: 36rpx;
				height: 16rpx;
				margin-left: 16rpx;
			}

		}

		&-main {
			padding: 0 24rpx;
			box-sizing: border-box;
			overflow: hidden;

			.collect {
				font-weight: 500;
				color: #BA5816;
			}

			.borrow {
				font-weight: 500;
			}

			.borrow-green {
				color: #16BA68;
			}

			.borrow-gray {
				color: #959595;
			}
		}

	}
</style>